import React from 'react';
import { ScrollView } from 'react-native';
import _ from 'lodash';
import moment from 'moment';
import { observer } from 'mobx-react';
import Icon from 'react-native-vector-icons/FontAwesome';
import Modal from '../../../components/Modal';
import Button from '../../../components/Button';
import Form from '../../../components/Form';
import Spin from '../../../components/spin';
import { idCardRule, mobileRule } from '../../../utils/rules';
import { _gender } from '../../../common/baseData';
import styles from './styles';
import ResultList from '../common/resultList';

const t = Form.t;

@observer
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {},
      searchResult: [],
      keyword: ''
    };
  }
  onSearch = keyword => {
    //const { keyword } = this.state;
    const kw = _.trim(keyword);
    if (kw) {
      this.props.customers.search(kw).then(list => {
        this.setState({
          searchResult: list,
          keyword
        });
      });
    }
  };
  closeModal = () => {
    this.setState({
      searchResult: [],
      keyword: ''
    });
  };
  setValue = value => {
    const {
      name: customerName,
      mobile: customerMobile,
      idCardNo: customerIdNo,
      gender: customerGender,
      birthday
    } = value;
    this.setState({
      value: {
        customerName,
        customerMobile,
        customerIdNo,
        customerGender,
        customerBirthday: birthday && new Date(birthday) || new Date()
      },
      keyword: '',
      searchResult: [],
    })
  };
  render() {
    const BaseType = {
      title: t.maybe(t.Nil),
      customerName: t.String,
      title2: t.maybe(t.Nil),
      customerMobile: t.refinement(
        t.maybe(t.Number),
        value => value === null || mobileRule(value)
      ),
      customerIdNo: t.refinement(
        t.maybe(t.String),
        value => value === null || idCardRule(value)
      ),
      customerGender: t.maybe(t.enums(_gender)),
      customerBirthday: t.maybe(t.Date)
    };
    const options = {
      auto: 'placeholders',
      fields: {
        title: {
          label: '必要信息',
          factory: Form.Title
        },
        customerName: {
          label: '客户姓名',
          error: '必填项',
          placeholder: '请输入客户真实姓名',
          factory: Form.TextBox,
          config: {
            rightCont: value => (
              <Button
                onPress={this.onSearch.bind(null, value)}
                icon={<Icon name="search" color="#fff" />}
                type="primary"
                style={{ width: 64 }}
                title="搜索"
                size="small"
              />
            )
          }
        },
        title2: {
          label: '选填信息',
          factory: Form.Title
        },
        customerMobile: {
          label: '客户手机号',
          error: '手机号格式不正确',
          placeholder: '请输入客户手机号'
        },
        customerIdNo: {
          label: '客户身份证号',
          error: '身份证号格式不正确',
          placeholder: '请输入客户身份证号',
          factory: Form.TextBox
        },
        customerGender: {
          label: '性别',
          placeholder: '请选择客户性别'
        },
        customerBirthday: {
          label: '客户生日',
          placeholder: '请选择客户生日',
          config: {
            format: date => moment(date).format('YYYY-MM-DD'),
            defaultValueText: '请选择客户生日'
          },
          maximumDate: new Date(),
          minimumDate: new Date('1950-01-01'),
          mode: 'date'
        }
      }
    };
    return (
      <Spin visible={this.props.store.pending}>
        <Modal
          visible={!_.isEmpty(this.state.searchResult)}
          title={`关键字“${this.state.keyword}”，${
            this.state.searchResult.length
          }个结果`}
          footer={<Button title="关闭" onPress={this.closeModal} />}
        >
          <ScrollView style={styles.resultList}>
            {_.map(this.state.searchResult, data => (
              <ResultList
                key={data.customerId}
                data={data}
                onPress={this.setValue.bind(null, data)}
              />
            ))}
          </ScrollView>
        </Modal>
        <Form
          {...this.props}
          initialValue={this.state.value}
          formType={BaseType}
          options={options}
          extraValue={{eventId: this.props.eventId}}
          filterValues={['title', 'title2']}
        />
      </Spin>
    );
  }
}

export default MyForm;
